/**
 * 主题样式文件
 * 定义亮色主题和暗色主题的样式变量和样式
 */

@import './variables.scss';

// ==================== 主题变量定义 ====================

// 亮色主题变量
:root {
  // 基础颜色
  --theme-primary: #{$primary-color};
  --theme-success: #{$success-color};
  --theme-warning: #{$warning-color};
  --theme-danger: #{$danger-color};
  --theme-info: #{$info-color};
  
  // 背景色
  --theme-bg-primary: #{$white};
  --theme-bg-secondary: #{$background-color};
  --theme-bg-tertiary: #{$background-color-light};
  --theme-bg-quaternary: #{$background-color-dark};
  
  // 文本颜色
  --theme-text-primary: #{$text-color};
  --theme-text-secondary: #{$text-color-2};
  --theme-text-tertiary: #{$text-color-3};
  --theme-text-quaternary: #{$text-color-4};
  --theme-text-inverse: #{$white};
  
  // 边框色
  --theme-border-primary: #{$border-color};
  --theme-border-secondary: #{$border-color-light};
  --theme-border-tertiary: #{$border-color-dark};
  
  // 阴影色
  --theme-shadow-primary: #{$shadow-color};
  --theme-shadow-secondary: #{$shadow-color-light};
  --theme-shadow-tertiary: #{$shadow-color-dark};
  
  // 覆盖层
  --theme-overlay: rgba(0, 0, 0, 0.5);
  --theme-overlay-light: rgba(0, 0, 0, 0.3);
  --theme-overlay-dark: rgba(0, 0, 0, 0.7);
  
  // 状态颜色
  --theme-disabled: #{$gray-5};
  --theme-placeholder: #{$text-color-3};
  --theme-divider: #{$border-color};
  
  // 特殊背景
  --theme-card-bg: #{$white};
  --theme-input-bg: #{$white};
  --theme-button-bg: #{$white};
  --theme-header-bg: #{$white};
  --theme-footer-bg: #{$white};
  
  // 渐变色
  --theme-gradient-primary: linear-gradient(135deg, #{$primary-color} 0%, #{$primary-light} 100%);
  --theme-gradient-success: linear-gradient(135deg, #{$success-color} 0%, #38d9a9 100%);
  --theme-gradient-warning: linear-gradient(135deg, #{$warning-color} 0%, #ffd43b 100%);
  --theme-gradient-danger: linear-gradient(135deg, #{$danger-color} 0%, #ff6b6b 100%);
}

// 暗色主题变量
[data-theme="dark"] {
  // 基础颜色（保持不变）
  --theme-primary: #{$primary-color};
  --theme-success: #{$success-color};
  --theme-warning: #{$warning-color};
  --theme-danger: #{$danger-color};
  --theme-info: #{$info-color};
  
  // 背景色
  --theme-bg-primary: #1a1a1a;
  --theme-bg-secondary: #2d2d2d;
  --theme-bg-tertiary: #404040;
  --theme-bg-quaternary: #525252;
  
  // 文本颜色
  --theme-text-primary: #ffffff;
  --theme-text-secondary: #cccccc;
  --theme-text-tertiary: #999999;
  --theme-text-quaternary: #666666;
  --theme-text-inverse: #000000;
  
  // 边框色
  --theme-border-primary: #404040;
  --theme-border-secondary: #525252;
  --theme-border-tertiary: #333333;
  
  // 阴影色
  --theme-shadow-primary: rgba(0, 0, 0, 0.3);
  --theme-shadow-secondary: rgba(0, 0, 0, 0.2);
  --theme-shadow-tertiary: rgba(0, 0, 0, 0.4);
  
  // 覆盖层
  --theme-overlay: rgba(0, 0, 0, 0.7);
  --theme-overlay-light: rgba(0, 0, 0, 0.5);
  --theme-overlay-dark: rgba(0, 0, 0, 0.8);
  
  // 状态颜色
  --theme-disabled: #666666;
  --theme-placeholder: #999999;
  --theme-divider: #404040;
  
  // 特殊背景
  --theme-card-bg: #2d2d2d;
  --theme-input-bg: #404040;
  --theme-button-bg: #2d2d2d;
  --theme-header-bg: #1a1a1a;
  --theme-footer-bg: #1a1a1a;
  
  // 渐变色
  --theme-gradient-primary: linear-gradient(135deg, #{$primary-color} 0%, #{$primary-dark} 100%);
  --theme-gradient-success: linear-gradient(135deg, #{$success-color} 0%, #20c997 100%);
  --theme-gradient-warning: linear-gradient(135deg, #{$warning-color} 0%, #fd7e14 100%);
  --theme-gradient-danger: linear-gradient(135deg, #{$danger-color} 0%, #dc3545 100%);
}

// ==================== 主题切换类 ====================

.theme-light {
  color-scheme: light;
}

.theme-dark {
  color-scheme: dark;
}

// ==================== 基础组件主题样式 ====================

// 页面容器
.page-container {
  background-color: var(--theme-bg-secondary);
  color: var(--theme-text-primary);
  transition: background-color $animation-duration-base ease, color $animation-duration-base ease;
}

// 卡片组件
.theme-card {
  background-color: var(--theme-card-bg);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border-primary);
  box-shadow: 0 2px 8px var(--theme-shadow-primary);
  transition: all $animation-duration-base ease;
  
  &:hover {
    box-shadow: 0 4px 12px var(--theme-shadow-secondary);
  }
}

// 按钮组件
.theme-button {
  background-color: var(--theme-button-bg);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border-primary);
  transition: all $animation-duration-base ease;
  
  &:hover {
    background-color: var(--theme-bg-tertiary);
  }
  
  &:active {
    background-color: var(--theme-bg-quaternary);
  }
  
  &.primary {
    background: var(--theme-gradient-primary);
    color: var(--theme-text-inverse);
    border-color: var(--theme-primary);
  }
  
  &.success {
    background: var(--theme-gradient-success);
    color: var(--theme-text-inverse);
    border-color: var(--theme-success);
  }
  
  &.warning {
    background: var(--theme-gradient-warning);
    color: var(--theme-text-inverse);
    border-color: var(--theme-warning);
  }
  
  &.danger {
    background: var(--theme-gradient-danger);
    color: var(--theme-text-inverse);
    border-color: var(--theme-danger);
  }
}

// 输入框组件
.theme-input {
  background-color: var(--theme-input-bg);
  color: var(--theme-text-primary);
  border: 1px solid var(--theme-border-primary);
  transition: all $animation-duration-base ease;
  
  &::placeholder {
    color: var(--theme-placeholder);
  }
  
  &:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary), 0.2);
  }
  
  &:disabled {
    background-color: var(--theme-bg-tertiary);
    color: var(--theme-disabled);
    cursor: not-allowed;
  }
}

// 头部组件
.theme-header {
  background-color: var(--theme-header-bg);
  color: var(--theme-text-primary);
  border-bottom: 1px solid var(--theme-border-primary);
  box-shadow: 0 2px 4px var(--theme-shadow-secondary);
}

// 底部组件
.theme-footer {
  background-color: var(--theme-footer-bg);
  color: var(--theme-text-primary);
  border-top: 1px solid var(--theme-border-primary);
}

// 分割线
.theme-divider {
  border-color: var(--theme-divider);
}

// 覆盖层
.theme-overlay {
  background-color: var(--theme-overlay);
}

// ==================== 状态主题样式 ====================

// 成功状态
.theme-success {
  color: var(--theme-success);
  
  &.bg {
    background-color: var(--theme-success);
    color: var(--theme-text-inverse);
  }
  
  &.border {
    border-color: var(--theme-success);
  }
}

// 警告状态
.theme-warning {
  color: var(--theme-warning);
  
  &.bg {
    background-color: var(--theme-warning);
    color: var(--theme-text-inverse);
  }
  
  &.border {
    border-color: var(--theme-warning);
  }
}

// 危险状态
.theme-danger {
  color: var(--theme-danger);
  
  &.bg {
    background-color: var(--theme-danger);
    color: var(--theme-text-inverse);
  }
  
  &.border {
    border-color: var(--theme-danger);
  }
}

// 信息状态
.theme-info {
  color: var(--theme-info);
  
  &.bg {
    background-color: var(--theme-info);
    color: var(--theme-text-inverse);
  }
  
  &.border {
    border-color: var(--theme-info);
  }
}

// ==================== 文本主题样式 ====================

.theme-text {
  &-primary {
    color: var(--theme-text-primary);
  }
  
  &-secondary {
    color: var(--theme-text-secondary);
  }
  
  &-tertiary {
    color: var(--theme-text-tertiary);
  }
  
  &-quaternary {
    color: var(--theme-text-quaternary);
  }
  
  &-inverse {
    color: var(--theme-text-inverse);
  }
}

// ==================== 背景主题样式 ====================

.theme-bg {
  &-primary {
    background-color: var(--theme-bg-primary);
  }
  
  &-secondary {
    background-color: var(--theme-bg-secondary);
  }
  
  &-tertiary {
    background-color: var(--theme-bg-tertiary);
  }
  
  &-quaternary {
    background-color: var(--theme-bg-quaternary);
  }
}

// ==================== 边框主题样式 ====================

.theme-border {
  &-primary {
    border-color: var(--theme-border-primary);
  }
  
  &-secondary {
    border-color: var(--theme-border-secondary);
  }
  
  &-tertiary {
    border-color: var(--theme-border-tertiary);
  }
}

// ==================== 阴影主题样式 ====================

.theme-shadow {
  &-primary {
    box-shadow: 0 2px 8px var(--theme-shadow-primary);
  }
  
  &-secondary {
    box-shadow: 0 1px 3px var(--theme-shadow-secondary);
  }
  
  &-tertiary {
    box-shadow: 0 4px 12px var(--theme-shadow-tertiary);
  }
}

// ==================== 主题切换动画 ====================

.theme-transition {
  transition: background-color $animation-duration-base ease,
              color $animation-duration-base ease,
              border-color $animation-duration-base ease,
              box-shadow $animation-duration-base ease;
}

// ==================== 系统主题检测 ====================

// 系统偏好暗色主题时的默认样式
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    // 自动应用暗色主题变量
    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: #2d2d2d;
    --theme-bg-tertiary: #404040;
    --theme-bg-quaternary: #525252;
    
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #cccccc;
    --theme-text-tertiary: #999999;
    --theme-text-quaternary: #666666;
    --theme-text-inverse: #000000;
    
    --theme-border-primary: #404040;
    --theme-border-secondary: #525252;
    --theme-border-tertiary: #333333;
    
    --theme-shadow-primary: rgba(0, 0, 0, 0.3);
    --theme-shadow-secondary: rgba(0, 0, 0, 0.2);
    --theme-shadow-tertiary: rgba(0, 0, 0, 0.4);
    
    --theme-overlay: rgba(0, 0, 0, 0.7);
    --theme-overlay-light: rgba(0, 0, 0, 0.5);
    --theme-overlay-dark: rgba(0, 0, 0, 0.8);
    
    --theme-disabled: #666666;
    --theme-placeholder: #999999;
    --theme-divider: #404040;
    
    --theme-card-bg: #2d2d2d;
    --theme-input-bg: #404040;
    --theme-button-bg: #2d2d2d;
    --theme-header-bg: #1a1a1a;
    --theme-footer-bg: #1a1a1a;
  }
}

// ==================== 主题切换器样式 ====================

.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 24px;
  background-color: var(--theme-bg-tertiary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 12px;
  cursor: pointer;
  transition: all $animation-duration-base ease;
  
  &::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: var(--theme-text-primary);
    border-radius: 50%;
    transition: transform $animation-duration-base ease;
  }
  
  &.dark {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    
    &::before {
      transform: translateX(24px);
      background-color: var(--theme-text-inverse);
    }
  }
  
  .theme-icon {
    position: absolute;
    font-size: 12px;
    color: var(--theme-text-tertiary);
    transition: opacity $animation-duration-base ease;
    
    &.sun {
      left: 4px;
      opacity: 1;
    }
    
    &.moon {
      right: 4px;
      opacity: 0;
    }
  }
  
  &.dark {
    .theme-icon {
      &.sun {
        opacity: 0;
      }
      
      &.moon {
        opacity: 1;
      }
    }
  }
}

// ==================== 高对比度主题 ====================

@media (prefers-contrast: high) {
  :root {
    --theme-border-primary: #000000;
    --theme-text-primary: #000000;
    --theme-shadow-primary: rgba(0, 0, 0, 0.8);
  }
  
  [data-theme="dark"] {
    --theme-border-primary: #ffffff;
    --theme-text-primary: #ffffff;
    --theme-shadow-primary: rgba(255, 255, 255, 0.3);
  }
}

// ==================== 减少动画主题 ====================

@media (prefers-reduced-motion: reduce) {
  .theme-transition,
  .theme-switcher,
  .theme-card,
  .theme-button,
  .theme-input {
    transition: none !important;
  }
}

// ==================== 打印主题 ====================

@media print {
  :root,
  [data-theme="dark"] {
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #ffffff;
    --theme-text-primary: #000000;
    --theme-text-secondary: #333333;
    --theme-border-primary: #cccccc;
    --theme-shadow-primary: none;
  }
  
  .theme-card,
  .theme-button,
  .theme-input {
    box-shadow: none !important;
    background-color: transparent !important;
    border: 1px solid #cccccc !important;
  }
}